<template>
  <div>
    <!-- 锚点导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <!-- <el-breadcrumb-item>
        <a href="#/home">首页</a>
      </el-breadcrumb-item>-->
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-input placeholder="请输入内容" v-model="param.query" clearable @clear="getListDate">
              <el-button slot="append" icon="el-icon-search" @click="getListDate"></el-button>
            </el-input>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="dialogVisible=true">添加用户</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="text item">
        <!-- getListArr 数据源 -->
        <el-table :data="getListArr" border stripe>
          <!-- 添加索引列 -->
          <el-table-column type="index"></el-table-column>
          <!-- 表格列 -->
          <el-table-column prop="username" label="姓名"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column prop="mobile" label="电话"></el-table-column>
          <el-table-column prop="rolename" label="角色"></el-table-column>
          <!-- switch 开关组件 区域 -->
          <el-table-column label="状态">
            <!--  prop="mgstate" -->
            <template slot-scope="scope">
              <!-- {{scope.row}} -->
              <el-tooltip :content="'Switch value: ' + value" placement="top">
                <el-switch v-model="scope.row.mgstate" active-color="#13ce66" inactive-color="#ff4949"
                  active-icon-class="el-icon-unlock" inactive-icon-class="el-icon-lock"
                  @change="userStateChanged(scope.row)">
                </el-switch>
              </el-tooltip>
            </template>
          </el-table-column>
          <!-- 操作按钮区域 -->
          <el-table-column label="操作">
            <!-- 因为通过element 没有明确id属性获取 需要 使用作用域插槽 scope 是表格每一行的数据date-->
            <template slot-scope="scope">
              <!-- 修改按钮 -->
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="editUserInfoBtn(scope.row.id)">
              </el-button>
              <!-- 删除按钮 -->
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="delUserInfo(scope.row.id)"></el-button>
              <el-tooltip effect="dark" content="设置" placement="top" :enterable="false">
                <!-- 设置按钮 -->
                <el-button type="warning" icon="el-icon-setting" size="mini" @click="setUserInfoBtn(scope.row)">
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页功能  current-page:默认显示显示获取焦点第几页  :page-size 当前一页显示多少条-->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="param.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="param.pagesize"
          layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </el-card>

    <!-- 添加用户对话框区域 :close-on-click-modal="false"   :before-close="handleClose"关闭 x 背景遮罩时触发  @closed="closedAddUserConfirm"      :before-close="addUserClose"-->
    <el-dialog title="新增用户信息" :visible.sync="dialogVisible" :destroy-on-close="true" width="50%" @close="close">
      <!-- 内容主题区域 -->
      <el-form :model="addUserForm" status-icon :rules="addUserFormRules" ref="addUserFormRef" label-width="70px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addUserForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addUserForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addUserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="tel">
          <el-input v-model="addUserForm.tel"></el-input>
        </el-form-item>
      </el-form>
      <!-- 内容底部区域 -->
      <span slot="footer" class="dialog-footer">
        <!-- cancelAddUser -->
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="confirmAddUser">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改用户信息弹框 -->
    <el-dialog title="修改用户信息" :visible.sync="editDialogVisible" width="50%" @close="closeEditDialog">
      <!-- 内容主体区域 -->
      <el-form ref="editUserInfoRef" :model="getEditFormItemObj" :rules="editUserInfoRules" label-width="70px">
        <el-form-item label="用户名">
          <el-input v-model="getEditFormItemObj.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="getEditFormItemObj.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="getEditFormItemObj.mobile"></el-input>
        </el-form-item>
      </el-form>
      <!-- 内容底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmEditUserInfo">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 设置用户角色 dialog -->
    <el-dialog title="设置用户角色信息" :visible.sync="setUserInfoDialogVisible" width="50%" @close="closeSetDialog">
      <!-- 内容主体区域 -->
      <p>当前的用户：{{currentUserInfo.username}}</p>
      <p>当前的角色：{{currentUserInfo.rolename}}</p>
      <!-- 用户角色列表select -->
      <p>分配新角色：<el-select v-model="selectedUserId" clearable placeholder="请选择">
          <el-option v-for="item in getCurrentUserList" :key="item.id" :label="item.roleName" :value="item.id">
          </el-option>
        </el-select>
      </p>
      <!-- 内容底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="setUserInfoDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSetUserInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      //自定义邮箱正则验证
      let emailRuler = (rule, value, callback) => {
        let emailRegExp = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;
        if (!emailRegExp.test(value)) {
          callback(new Error('请输入合法的邮箱！'));
        } else {
          callback();
        }
      };
      //自定义验证手机号
      let telRuler = (rule, value, callback) => {
        let telRegExp = /^1[3456789]\d{9}$/

        if (telRegExp.test(value)) {
          return callback();
        }

        callback(new Error('请输入合法的手机号！'))
      }

      return {
        ipt1: '',
        // 获取数据列表
        getListArr: [
          {
            username: 'zs',
            email: '123456789@qq.com',
            mobile: '15556938617',
            rolename: '主角',
            mgstate: true
          },
          {
            username: 'zs',
            email: '123456789@qq.com',
            mobile: '15556938617',
            rolename: '主角',
            mgstate: false
          },
          {
            username: 'zs',
            email: '123456789@qq.com',
            mobile: '15556938617',
            rolename: '主角',
            mgstate: true
          },
          {
            username: 'zs',
            email: '123456789@qq.com',
            mobile: '15556938617',
            rolename: '主角',
            mgstate: false
          },
          {
            username: 'zs',
            email: '123456789@qq.com',
            mobile: '15556938617',
            rolename: '主角',
            mgstate: true
          },
          {
            username: 'zs',
            email: '123456789@qq.com',
            mobile: '15556938617',
            rolename: '主角',
            mgstate: true
          }
        ],
        // 设置列表请求参数
        param: {
          query: '',
          // 默认第一页
          pagenum: 1,
          // 每页多少条
          pagesize: 2
        },
        // 总条数
        total: 0,
        value: true,
        // 获取到的某一条编辑信息   
        getEditFormItemObj: {
          "id": 500,
          "username": "admin",
          "role_id": 0,
          "mobile": "17755832693",
          "email": "15556938617@163.com"
        },
        //编辑确认提交时 参数
        // confirmEditParam: {
        //   "email": this.getEditFormItemObj.email,
        //   "mobile": this.getEditFormItemObj.mobile,
        // },
        // 添加对话框的是否显示的属性
        dialogVisible: false,
        // 编辑用户对话框是否显示
        editDialogVisible: false,
        // 新增用户信息表单数据
        addUserForm: {
          username: '',
          password: '',
          email: '',
          tel: ''
        },
        // 新增用户信息验证规则
        addUserFormRules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            // 自定义验证正则
            { validator: emailRuler, trigger: 'blur' }
          ],
          tel: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            // 自定义验证手机号
            { validator: telRuler, trigger: 'blur' }
          ]
        },
        //编辑用户的验证规则
        editUserInfoRules: {
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            // 自定义验证正则
            { validator: emailRuler, trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            // 自定义验证手机号
            { validator: telRuler, trigger: 'blur' }
          ]
        },
        // 设置用户角色 dialog的默认显示
        setUserInfoDialogVisible: false,
        // 设置用户信息 保存当前的用户信息
        currentUserInfo: {},
        //用户角色列表select的选中默认值
        selectedUserId: "",
        //当前的用户列表 下拉数据
        getCurrentUserList: [
          {
            "id": 31,  //角色id
            "roleName": "主管",
            "roleDesc": "技术负责人",
            "authName": "权限一",
            "children": [
              {
                "id": 101,  //权限id
                "authName": "商品管理",
                "path": null,
                "children": [
                  {
                    "id": 104,   //权限id
                    "authName": "商品列表",
                    "path": null,
                    "children": [
                      {
                        "id": 105,   //权限id
                        "authName": "添加商品",
                        "path": null,
                      }
                    ]
                  }
                ]
              }
            ]
          },

          {
            "id": 32,
            "roleName": "测试角色",
            "roleDesc": "测试角色描述",
            "authName": "权限二",
            "children": [
              {
                "id": 101,
                "authName": "商品管理",
                "path": null,
                "children": [
                  {
                    "id": 104,
                    "authName": "商品列表",
                    "path": null,
                    "children": [
                      {
                        "id": 105,
                        "authName": "添加商品",
                        "path": null,
                      }
                    ]
                  }
                ]
              }
            ]
          },

          {
            "id": 33,
            "roleName": "部门负责人",
            "roleDesc": "部门管理",
            "authName": "权限三",
            "children": [
              {
                "id": 101,
                "authName": "商品管理",
                "path": null,
                "children": [
                  {
                    "id": 104,
                    "authName": "商品列表",
                    "path": null,
                    "children": [
                      {
                        "id": 105,
                        "authName": "添加商品",
                        "path": null,
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    created() {
      // this.getListDate()
    },
    methods: {
      async getListDate() {
        const { data: res } = await this.$http.get('', { param: this.param })
        if (res && res.meta.status !== 200) this.$message.error('列表数据获取失败！')
        //验证通过
        this.getListArr = this.data.users
        this.total = this.data.total
      },
      // handleSizeChange select调整每页显示多少条时候显示每页多少条
      handleSizeChange(pageCount) {
        this.pagesize = pageCount
        // 调用请求接口即可 因为请求接口不对 就不调用了
        // this.getListDate()
      },
      // handleCurrentChange 点击页码切换时候触发 获取当前点击的页码
      handleCurrentChange(currentPage) {
        this.pagenum = currentPage
        // 调用请求接口即可 因为请求接口不对 就不调用了
        // this.getListDate()
      },
      // 修改用户状态
      async userStateChanged(userInfo) {
        //  const {data:res} = await this.$http.put(`user/${userInfo.id}/state/${userInfo.mgstate}`);
        //  if(data.meta.status !==200){
        //    //重置原状态
        //    return this.$message.error("状态改变失败！")
        //  }
        //  //请求成功
        //   this.$message.success("状态改变成功！");
      },
      //关闭新增用户的弹框的 X 背景遮罩时
      // addUserClose(done) {
      //   console.log("点击了弹框关闭按钮")
      //   //重置表单
      //   this.cancelAddUser();
      //   done()
      // },
      // dialog 关闭时调用
      close() {
        //重置新增用户信息
        console.log("关闭～重置啦");
        this.$refs.addUserFormRef.resetFields();
      },
      // dialog 关闭动画结束时调用
      // closedAddUserConfirm() {
      //   console.log("关闭了新增用户的弹窗")
      //   //重置新增用户信息
      //   this.$refs.addUserFormRef.resetFields();
      // },
      //点击取消  隐藏新增用户弹框
      cancelAddUser() {
        this.dialogVisible = false;
        //重置新增用户信息
        this.$refs.addUserFormRef.resetFields();
      },
      //点击确认新增用户信息时
      confirmAddUser() {
        //验证是否通过验证
        this.$refs.addUserFormRef.validate((valid) => {
          if (!valid) return;
          //发起验证添加用户请求
          let { data: res } = this.$http.post('user', this.addUserForm);

          if (res.status !== 200) return this.$message.success('新增用户失败!');

          this.$message.success('新增用户成功!')
          //隐藏新增用户弹窗
          this.dialogVisible = false;
          //重新获取用户列表
          this.getListDate();

          // ----------------------------提交前验证--------------------------------------------------------------
          // if (this.addUserForm.username == '') {
          //   this.$message.error('用户名不能为空!');
          // } else if (/^[a-zA-Z]{4,20}$/.test(this.addUserForm.username) == false) {
          //   this.$message.error('用户名不正确!');
          // } else {
          //   //此处可以进行后台提交
          // }
          // ----------------------------提交前验证--------------------------------------------------------------

        })
      },
      //编辑用户信息弹框关闭时
      closeEditDialog() {
        this.$refs.editUserInfoRef.resetFields();
      },
      //编辑用户信息
      async editUserInfoBtn(id) {
        //显示编辑用户信息弹框
        this.editDialogVisible = true;
        //根据用户id 获取数据回显
        // const { data: res } = await this.$http.get('user/' + id)

        // if (res.meta.status !== 200) this.$message.error('用户信息获取失败!');

        // //数据成功回显示
        // this.getEditFormItemObj = res.data;

      },
      //确认提交修改 
      confirmEditUserInfo() {
        // 验证是否通过验证
        this.$refs.addUserFormRef.validate((valid) => {
          if (!valid) return;
          //   //发起验证添加用户请求
          //   let { data: res } = this.$http.post('user' + this.getEditFormItemObj.id,{
          //   "email": this.getEditFormItemObj.email,
          //   "mobile": this.getEditFormItemObj.mobile,
          // });

          //   if (res.meta.status !== 200) return this.$message.success('编辑用户失败!');

          //隐藏新增用户弹窗
          this.editDialogVisible = false;
          //重新获取用户列表
          // this.getListDate();
          this.$message.success('编辑用户成功!')
        })
      },
      //删除用户信息 二次提示
      async delUserInfo(id) {
        console.log(id)
        //二次次弹框提示
        const confirmRes = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',   //点击确认 confirmRes返回 confirm 
          cancelButtonText: '取消',   //点击取消 confirmRes返回 cancel
          type: 'warning'
        }).catch(err => err)  //不写会报错 
        //判断返回值
        if (confirmRes !== "confirm") return this.$message.info("已取消删除！")

        // 根据id发送 删除请求
        const { data: res } = await this.$http.delete('users/' + id);
        if (res.meta.status !== 200) return this.$message.error("删除失败！")

        //删除成功
        this.$message.error("删除成功");
        //重新获取列表数据
        this.getListDate();
      },
      // 关闭设置用户信息dialog的事件
      closeSetDialog() {
        //清空用户select的信息
        this.selectedUserId = '';
        // this.getCurrentUserList=[];
        console.log("关闭了用户信息的dialog");
      },
      // 确认提交选中后的用户dialog的信息
      confirmSetUserInfo() {
        this.setUserInfoDialogVisible = false;
      },
      // 设置用户信息弹出 处理
      setUserInfoBtn(userInfo) {
        // 获取当前的用户信息 绑定data进行回显
        this.currentUserInfo = userInfo;
        //获取当前的用户列表
        // const { data:res } = await this.$http.get("roles"); 

        // if(res.meta.status!==200){
        //     return this.$message.error("用户列表获取失败！")
        // }

        //获取成功 保存用户列表到data
        // this.getCurrentUserList = res.data;

        //显示弹框
        this.setUserInfoDialogVisible = true
      },
      // 根据当前的id 提交 用户修改的角色信息
      confirmSetUserInfo() {
        // 判断用户是否做了选择
        if (!this.selectedUserId) {
          return this.$message.error("请选择要分配的新角色！")
        }
        /**
         * this.currentUserInfo.id 当前角色id
         * this.selectedUserId 选中的新角色id
        */
        //  const { data:res } = await this.$http.put(`users/${this.currentUserInfo.id}/role`,{
        //    rid: this.selectedUserId
        //  })
        //  if(res.meta.status!==200){
        //    return this.$message.error("修改失败！")
        //  }

        this.$message.success("修改成功！")
        //  修改成功
        this.setUserInfoDialogVisible = false
      }
    }
  }
</script>
<style lang="less" scoped>
  .el-card {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) !important;
  }
</style>